<template>
  <section class="chart-container">
    <div class="grid-item">
      <div class="container-item devlist">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="告警设备" name="alarm">
          <div class="block" style="height: 287px;" v-show="tableAlarm.length>0">
            <template v-for='item in tableAlarm.slice((currentPageAlarm - 1) * 20, currentPageAlarm * 20)'> 
                <div class="item-dev-list" @click="clickToDevDetail(item)">{{item.deviceName}}</div>
            </template>
            <div class="tar"></div>
          </div>
          <div class="block" style="height: 318px;position:relative;" v-show="tableAlarm.length<=0">
            <div class="empty-view">
              <img src="@/assets/data_empty.png"/>
              <p>暂无设备</p>
            </div>
          </div>
          <el-pagination
              :hide-on-single-page="tableAlarm.length<=0"
              @current-change="handleCurrentChangeAlarm"
              :current-page="currentPageAlarm"
              :page-size="20"
              layout="prev, pager, next, jumper"
              :total="tableAlarm.length">
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="故障设备" name="fault">
          <div class="block" style="height: 287px;" v-show="tableFault.length>0">
            <template v-for='item in tableFault.slice((currentPageFault - 1) * 20, currentPageFault * 20)'> 
                <div class="item-dev-list" @click="clickToDevDetail(item)">{{item.deviceName}}</div>
            </template>
            <div class="tar"></div>
          </div>
          <div class="block" style="height: 318px;position:relative;" v-show="tableFault.length<=0">
            <div class="empty-view">
              <img src="@/assets/data_empty.png"/>
              <p>暂无设备</p>
            </div>
          </div>
            <el-pagination
              :hide-on-single-page="tableFault.length<=0"
              @current-change="handleCurrentChangeFault"
              :current-page="currentPageFault"
              :page-size="20"
              layout="prev, pager, next, jumper"
              :total="tableFault.length">
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="拆除设备" name="dismantle">
            <div class="block" style="height: 287px;" v-show="tableDismantle.length>0">
              <template v-for='item in tableDismantle.slice((currentPageDismantle - 1) * 20, currentPageDismantle * 20)'> 
                  <div class="item-dev-list" @click="clickToDevDetail(item)">{{item.deviceName}}</div>
              </template>
              <div class="tar"></div>
            </div>
            <div class="block" style="height: 318px;position:relative;" v-show="tableDismantle.length<=0">
              <div class="empty-view">
                <img  src="@/assets/data_empty.png"/>
                <p>暂无设备</p>
              </div>
            </div>
            <el-pagination
              :hide-on-single-page="tableDismantle.length<=0"
              @current-change="handleCurrentChangeDismantle"
              :current-page="currentPageDismantle"
              :page-size="20"
              layout="prev, pager, next, jumper"
              :total="tableDismantle.length">
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="低电压设备" name="lowvolt">
          <div class="block" style="height: 287px;" v-show="tableLowVolt.length>0">
            <template v-for='item in tableLowVolt.slice((currentPageLowVolt - 1) * 20, currentPageLowVolt * 20)'> 
                <div class="item-dev-list" @click="clickToDevDetail(item)">{{item.deviceName}}</div>
            </template>
            <div class="tar"></div>
          </div>
          <div class="block" style="height: 318px;position:relative;" v-show="tableLowVolt.length<=0">
            <div class="empty-view">
              <img src="@/assets/data_empty.png"/>
              <p>暂无设备</p>
            </div>
          </div>
            <el-pagination
              :hide-on-single-page="tableLowVolt.length<=0"
              @current-change="handleCurrentChangeLowVolt"
              :current-page="currentPageLowVolt"
              :page-size="20"
              layout="prev, pager, next, jumper"
              :total="tableLowVolt.length">
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="其他" name="other">
          <div class="block" style="height: 287px;" v-show="tableOther.length>0">
            <template v-for='item in tableOther.slice((currentPageOther - 1) * 20, currentPageOther * 20)'> 
                <div class="item-dev-list" @click="clickToDevDetail(item)">{{item.deviceName}}</div>
            </template>
            <div class="tar"></div>
          </div>
          <div class="block" style="height: 318px;position:relative;" v-show="tableOther.length<=0">
            <div class="empty-view">
              <img src="@/assets/data_empty.png"/>
              <p>暂无设备</p>
            </div>
          </div>
            <el-pagination
              :hide-on-single-page="tableOther.length<=0"
              @current-change="handleCurrentChangeOther"
              :current-page="currentPageOther"
              :page-size="20"
              layout="prev, pager, next, jumper"
              :total="tableOther.length">
            </el-pagination>
        </el-tab-pane>
      </el-tabs>
      </div>
    </div>
    <div class="grid-item"><div class="container-item"><div id="container_state" style="width:100%;height:390px;"></div></div></div>
    <div class="grid-item"><div class="container-item"><div id="container_software" style="width:100%;height:390px;"></div></div></div>
    <div class="grid-item"><div class="container-item"><div id="container_hardware" style="width:100%;height:390px;"></div></div></div>
  </section>
</template>
<style scoped>
.el-pagination {
    text-align: center; 
    margin-top: 10px;
}
.grid-item {
    float: left;
    width: 50%;
    height: 400px;
}

.container-item {
    box-sizing: border-box;
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 20px;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    margin: 5px;
    height: 390px;
    padding: 5px;
}

.container-item.devlist {
    padding: 0px;
}

.tar {
  clear: left;
}
.item-dev-list {
  width:47%;
  float:left;
  padding:5px;
  cursor: pointer;
  text-decoration:underline;
}
.item-dev-list:hover
{ 
 color:#409eff;
}
.empty-view {
  margin-top:0px;
  position:absolute;
  top:35px;
  left:0px;
  width:100%;
}

.empty-view img {
  display: block;
  margin: 0 auto;
}

.empty-view p {
  text-align: center;
  color: #909399;
}

</style>
<script>
import debounce from 'lodash.debounce';
import echarts from 'echarts'
import { staticsService } from '@/services';
export default {
  data () {
    return {
      activeName: 'fault',
      staticDeviceStatusData: [],
      staticSoftWareData: [],
      staticHardWareData: [],
      currentPageAlarm: 1,
      currentPageDismantle: 1,
      currentPageFault: 1,
      currentPageLowVolt: 1,
      currentPageOther: 1,
      tableAlarm: [],
      tableDismantle: [],
      tableFault: [],
      tableLowVolt: [],
      tableOther: [],
    };
  },
  activated () {
    this.activeName = 'fault';
    this.queryTotalStatics();
  },
  components: {
  },
  methods: {
    clickToDevDetail(item) {
      console.log(item);
      var prodKey = item.prodKey;
      if(prodKey==='15134891' || prodKey==='15190721'){
        let { href } = this.$router.resolve({ path: '/deviceDetailProfileGC', query: { deviceId: item.deviceId } });
        window.open(href, '_blank');
      }else{
      let { href } = this.$router.resolve({ path: '/deviceDetail', query: { deviceId: item.deviceId } });
      window.open(href, '_blank');
      }

    },
    handleCurrentChangeAlarm(val) {
      this.currentPageAlarm = val;
      console.log(`当前页: ${val}`);
    },
    handleCurrentChangeDismantle(val) {
      this.currentPageDismantle = val;
      console.log(`当前页: ${val}`);
    },
    handleCurrentChangeFault(val) {
      this.currentPageFault = val;
      console.log(`当前页: ${val}`);
    },
    handleCurrentChangeLowVolt(val) {
      this.currentPageLowVolt = val;
      console.log(`当前页: ${val}`);
    },
    handleCurrentChangeOther(val) {
      this.currentPageOther = val;
      console.log(`当前页: ${val}`);
    },
    stateCharts () {
      var dom = document.getElementById("container_state");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '设备状态分布情况',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '设备状态分布情况',
            type: 'pie',
            radius: '50%',
            color: ['green', '#9e9e9e', 'red', 'blue', 'purple', '#ff9800'],
            data: this.staticDeviceStatusData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      myChart.on('mouseover', (params) => {
        var name = params.name;
        this.gotoSwitchPane(name);
      });
    },
    gotoSwitchPane (name) {
      if (name === '火灾告警') {
        this.activeName = 'alarm';
      } else if (name === '故障') {
        this.activeName = 'fault';
      } else if (name === '拆除') {
        this.activeName = 'dismantle';
      } else if (name === '低电压') {
        this.activeName = 'lowvolt';
      } else if (name === '其他') {
        this.activeName = 'other';
      }
    },
    softwareCharts () {
      var dom = document.getElementById("container_software");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '软件版本分布情况',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '软件版本分布情况',
            type: 'pie',
            radius: '50%',
            data: this.staticSoftWareData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    hardwareCharts () {
      var dom = document.getElementById("container_hardware");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '硬件版本分布情况',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '硬件版本分布情况',
            type: 'pie',
            radius: '50%',
            data: this.staticHardWareData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    queryTotalStatics: debounce(async function() {
      const { alarm_list, fault_list, dismantle_list, lowvolt_list, other_list, device_status, software_version, hardware_version } = await staticsService.queryTotalStatics();
        this.tableAlarm = alarm_list;
        this.tableFault = fault_list;
        this.tableDismantle = dismantle_list;
        this.tableLowVolt = lowvolt_list;
        this.tableOther = other_list;
        this.staticDeviceStatusData = device_status;
        this.staticSoftWareData = software_version;
        this.staticHardWareData = hardware_version;
        this.stateCharts();
        this.softwareCharts();
        this.hardwareCharts();
    }, 500),
  }
};
</script>